<template>
    <div id="user">
        <div class="userBox">
          <div class="left">
            <ul>
              <li v-for="(item,key) in resData" @click="getItemData(key)">
                {{key}}
                <!--<router-link :to="'/user/user_'+key">{{key}}</router-link>-->
              </li>
            </ul>
          </div>
          <div class="right">
            <router-view></router-view>
          </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "user",
      data(){
          return{
            resData:'',
          }
      },
      methods:{
        getItemData(key){
          console.log(key);
          if(key=='mine'){
            this.$router.push({path:'/user/user_mine'});
          }else if(key=='friend'){
            this.$router.push({path:'/user/user_friend'});
          }else{
            this.$router.push({path:'/user/user_group'});
          }
        }
      },
      mounted(){
          this.$http.get('http://www.gqluck.com/index/index/getList').then(
            response=>{
              console.log(response);
              this.resData=response.body.data;
            },
            err=>{
              console.log(err);
            }
          )
      },
    }
</script>

<style scoped>
  .userBox{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .userBox .left{
    width: 20%;
    padding: 20px 0;
    background-color: rosybrown;
  }
  .userBox .left li{
    padding:5px 0px;
    text-align: center;
  }
  .userBox .right{
    margin-left: 10px;
    width: 80%;
    height: 100%;
    box-sizing: border-box;
    /*flex: 1;*/
    border: 1px solid rosybrown;
    padding: 20px 0;
    overflow: hidden;
  }
</style>
